import React, {Component} from 'react';

import './index.less';

import {base, high} from 'nc-lightapp-front';

import {render, connect} from 'src/hrpub/common/frame';
import mainAction from './actions/main'

const {NCMonthPicker} = base;

const {
    NCModal,
    NCButton
} = base;

const {
    Body,
    Header,
    Footer
} = NCModal;

const BatchAttendModal = render({
    actions: {
        mainAct: mainAction
    },
    state: {
        monthValue: ''
    }
})(({props, state, action}) => {
    const {
        editTable,
        myLeave,
        batchModalVisible
    } = props;

    const {json = {}} = myLeave;

    return (
        <div>
            <NCModal
                className={'batch-attend-modal flex-container'}
                show={batchModalVisible}
                onHide={action.mainAct.closeModal}
                onEntered={action.mainAct.modalEntered}
                size='lg'
            >
                <Header
                    closeButton={true}
                >
                    {json['6040-000039']}
                </Header>
                <Body>
                    <div className={'batch_attend_month'}>
                        <span>{json['6040-000040']}: </span>
                        <NCMonthPicker className={'batch_month_picker'}
                                       value={state.monthValue}
                                       onChange={action.mainAct.monthChange}/>
                    </div>
                    <div className={'batch_attend_table flex-container'}>
                        {editTable.createEditTable('batch_attend_list', {
                            showCheck: true
                        })}
                    </div>
                </Body>
                <Footer>
                    <div
                        style={{
                            textAlign: 'right'
                        }}
                    >
                        <NCButton
                            colors="primary"
                            onClick={action.mainAct.confirm}
                        >
                            {json['6040-000041']}
                        </NCButton>
                        <NCButton
                            onClick={action.mainAct.closeModal}
                        >
                            {json['6040-000058']}
                        </NCButton>
                    </div>
                </Footer>
            </NCModal>
        </div>

    );
});


export default connect(BatchAttendModal);